import React, { useState, useEffect } from "react";
import FormItem from "antd/lib/form/FormItem";
import { Input, Form, Button, Switch, message } from "antd";
import { SettingApi } from "@/api/setting";

const OSSSetting = ({ settings }) => {
  const [Region, setRegion] = useState("");
  const [AccessKeyId, setAccessKeyId] = useState("");
  const [AccessKeySecret, setAccessKeySecret] = useState("");
  const [Bucket, setBucket] = useState("");
  const [Https, setHttps] = useState(false);
  useEffect(() => {
    setRegion(settings?.ossRegion || "");
    setAccessKeyId(settings?.ossAccessKeyId || "");
    setAccessKeySecret(settings?.ossAccessKeySecret || "");
    setBucket(settings?.ossBucket || "");
    setHttps(settings?.ossHttps || false);
  }, [settings]);
  const submit = async (e) => {
    e.preventDefault();
    const data = {
      ossRegion: Region,
      ossAccessKeyId: AccessKeyId,
      ossAccessKeySecret: AccessKeySecret,
      ossBucket: Bucket,
      ossHttps: Https,
    };
    await SettingApi.updateSettings(data);
    message.success("保存成功");
  };
  return (
    <Form onSubmit={submit}>
      <FormItem label="OSS Region">
        <Input
          onChange={(e) => setRegion(e.target.value)}
          value={Region}
          placeholder="请输入正确的 OSS Region"
        />
      </FormItem>
      <FormItem label="AccessKeyId">
        <Input
          onChange={(e) => setAccessKeyId(e.target.value)}
          value={AccessKeyId}
          placeholder="请输入正确的 OSS AccessKeyId"
        />
      </FormItem>
      <FormItem label="AccessKeySecret">
        <Input
          onChange={(e) => setAccessKeySecret(e.target.value)}
          value={AccessKeySecret}
          placeholder="请输入正确的 OSS AccessKeySecret"
        />
      </FormItem>
      <FormItem label="Bucket">
        <Input
          onChange={(e) => setBucket(e.target.value)}
          value={Bucket}
          placeholder="请输入 OSS Bucket"
        />
      </FormItem>
      <FormItem label="启动https">
        <Switch checked={Https} onChange={setHttps} />
      </FormItem>
      <FormItem>
        <Button htmlType="submit">保存</Button>
      </FormItem>
    </Form>
  );
};

export default OSSSetting;
